<template>
  <div>
    <h1>添加修改页面</h1>
    <!--切换按钮      -->
    <template>
      类型：
      <el-radio-group v-model="radio">
        <el-radio v-model="radio" label="0">目录</el-radio>
        <el-radio v-model="radio" label="1">菜单</el-radio>
        <el-radio v-model="radio" label="2">按钮</el-radio>
      </el-radio-group>
    </template>
    <!--目录表单      -->
    <el-form v-show="radio==0" ref="formInsert" :model="formInsert" label-width="80px">
      <el-form-item label="菜单名称">
        <el-input v-model="formInsert.name" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-input v-model="formInsert.parentName" placeholder="一级菜单" readonly="readonly" @focus="showTree" />
      </el-form-item>
      <el-form-item label="排序号">
        <el-input v-model="formInsert.orderNum" />
      </el-form-item>
      <el-form-item label="图标">
        <el-input v-model="formInsert.icon" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insert">立即创建</el-button>
        <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>

    <!--菜单表单      -->
    <el-form v-show="radio==1" ref="formInsert" :model="formInsert" label-width="80px">
      <el-form-item label="菜单名称">
        <el-input v-model="formInsert.name" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-input v-model="formInsert.parentName" placeholder="一级菜单" readonly="readonly" @focus="showTree" />
      </el-form-item>
      <el-form-item label="菜单URL">
        <el-input v-model="formInsert.url" />
      </el-form-item>
      <el-form-item label="授权标识">
        <el-input v-model="formInsert.perms" />
      </el-form-item>
      <el-form-item label="排序号">
        <el-input v-model="formInsert.orderNum" />
      </el-form-item>
      <el-form-item label="图标">
        <el-input v-model="formInsert.icon" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insert">立即创建</el-button>
        <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>

    <!--按钮表单      -->
    <el-form v-show="radio==2" ref="formInsert" :model="formInsert" label-width="80px">
      <el-form-item label="菜单名称">
        <el-input v-model="formInsert.name" />
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-input v-model="formInsert.parentName" placeholder="一级菜单" readonly="readonly" @focus="showTree" />
      </el-form-item>
      <el-form-item label="授权标识">
        <el-input v-model="formInsert.perms" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insert">立即创建</el-button>
        <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
        <el-button type="primary" @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>

    <!--父级列表对话框      -->
    <el-dialog
      title="选择菜单"
      :visible.sync="dialogVisible"
      width="30%"
      close-on-press-escape
    >
      <el-tree
        :data="tableData"
        :props="defaultProps"
        :tree-props="{children: 'sysMenuList'}"
        row-key="menuId"
        @node-click="handleNodeClick"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Add',
  data() {
    return {
      // 列表
      tableData: [],
      // 树
      defaultProps: {
        children: 'sysMenuList',
        label: 'name'
      },
      formInsert: {},
      // 单选框
      radio: '1',
      dialogVisible: false

    }
  },
  created() {
    this.parentList()
    this.initData()
  },
  methods: {
    initData() {
      // var menuId = localStorage.getItem('menuId')
      var menuId = this.$route.query.menuId
      if (menuId > 0) {
        this.axios.get('http://localhost:9999/system-management/sysMenu/selectById', {
          params: {
            menuId: menuId
          }
        }).then((response) => {
          console.log(response.data)
          if (response.data.code === '200') {
            this.formInsert = response.data.obj
            // alert(this.formInsert.type)
            // 单选框回显
            this.radio = this.formInsert.type + ''
          }
        })
      } else {
        this.formInsert = {}
      }
    },
    // 添加
    insert() {
      console.log('submit!')
      // if (this.radio === 0) {
      //   this.formInsert.type = 0
      //   this.formInsert.parentId = 0
      // } else if (this.radio === 1) {
      //   this.formInsert.type = 1
      // } else {
      //   this.formInsert.type = 2
      // }
      if (this.radio > 0) {
        this.formInsert.type = this.radio
      } else {
        this.formInsert.type = 0
        this.formInsert.parentId = 0
      }
      this.axios.post('http://localhost:9999/system-management/sysMenu/edit', this.formInsert).then((response) => {
        console.log(response.data)
        if (response.data.code === '200') {
          // alert('添加成功')
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          // this.$router.replace({ 'path': '/' })
          this.$router.push({
            path: 'SysMenu'
          })
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.formInsert = {}
    },
    // 返回
    goBack() {
      // this.$router.replace({ 'path': '/' })
      this.$router.push({
        path: 'SysMenu'
      })
    },
    // 展示上级菜单
    parentList() {
      this.axios.get('http://localhost:9999/system-management/sysMenu/parentList').then((response) => {
        console.log(response.data)
        this.tableData = response.data.obj
      })
    },
    // 打开树
    showTree() {
      this.dialogVisible = true
    },

    handleNodeClick(data) {
      console.log(data)
      this.formInsert.parentId = data.menuId
      this.formInsert.parentName = data.name
      this.formInsert.type = data.type
    }
  }
}
</script>

<style scoped>

</style>
